<template>
  <view
    class="test"
    :style="{
      'margin-top': componentData.data.marginTop * 2 + 'rpx',
      'margin-bottom': componentData.data.marginBottom * 2 + 'rpx',
      background: 'linear-gradient(to bottom, #CCFF8A, #CCFF8A)',
      padding: `${componentData.data.paddingTop + autoHieght}px ${
        componentData.data.paddingRight * 2
      }rpx ${componentData.data.paddingBottom * 2}rpx ${
        componentData.data.paddingLeft * 2
      }rpx`,
    }"
  >
    <view
      :style="{
        'background-color': componentData.data.barBgColor,
      }"
    >
        
      <!-- <view
        class="flex-cn"
        :style="{
          width: isWeChat == 1 ? '534rpx' : '400rpx',
          paddingLeft: isWeChat == 1 ? '0px' : '20px',
          height: '44px',
        }"
      >
        <view
          v-if="
            componentData.data.showAddress &&
            componentData.data.address_location_type == 1
          "
          :style="{
            color: componentData.data.fontColor,
            'margin-right': '10px',
            display: 'flex',
            'margin-top': '0px',
            'line-height': '30px',
            height: '30px',
            flex: '1',
            overflow: 'hidden',
          }"
        >
          <view style="text-align: center; line-height: 30px">
            <i
              style="font-size: 14px; margin: 0px 3px 0px 0px"
              class="home-map-icon iconfont icon-dingwei"
            ></i>
          </view>
          <view
            @click="getLocal"
            style="font-size: 12px; display: flex; flex: 1; overflow: hidden"
          >
            <view class="text-ellipsis">{{ userPosition }}</view>
            <i
              style="font-size: 10px; margin-left: 5px"
              class="qh-rt-single qh-rt-a-zu2430"
            ></i>
          </view>
        </view> -->

      <view
        v-if="componentData.data.address_location_type == 2"
        class="input-box"
        :style="{
          color: componentData.data.inputColor,
          backgroundColor: componentData.data.inputBgColor,
          borderRadius: componentData.data.borderRadius + 'px',
          height: componentData.data.height + 'px',
        }"
      >
        <view
          :style="{
            display: 'flex',
            height: componentData.data.height + 'px',
            'justify-content': componentData.data.justify,
            width: '80%',
            lineHeight: componentData.data.height + 'px',
          }"
        >
          <i class="qh-rt-single qh-rt-a-zu2432"></i>
          {{ componentData.data.title }}
        </view>
        <view
          class="flex-cn"
          :style="{
            height: '100%',
            marginLeft: 'auto',
          }"
        >
          <view
            class="search_button"
            :style="{
              backgroundColor: componentData.data.barBgColor,
              color: componentData.data.fontColor,
              borderRadius: componentData.data.borderRadius + 'px',
              height: componentData.data.height - 6 + 'px',
              lineHeight: componentData.data.height - 6 + 'px',
              marginRight: '3px',
            }"
          >
            搜索
          </view>
        </view>
      </view>
    </view>

    <view style="display: flex; flex: 1">
      <!-- <view
          v-if="
            componentData.data.showAddress &&
            componentData.data.address_location_type == 2
          "
          :style="{
            color: componentData.data.fontColor,
            'margin-right': '10px',
            display: 'flex',
            'margin-top': '0px',
            'line-height': '40px',
            height: '40px',
            width: '75%',
            flex: '1',
            overflow: 'hidden',
          }"
        >
          <view style="text-align: center; line-height: 40px">
            <i
              style="font-size: 14px; margin: 0px 3px 0px 0px"
              class="home-map-icon iconfont icon-dingwei"
            ></i>
          </view>
          <view
            @click="getLocal"
            style="font-size: 12px; display: flex; flex: 1; overflow: hidden"
          >
            <view class="text-ellipsis">{{ userPosition }}</view>
            <i
              style="font-size: 10px; margin-left: 5px"
              class="qh-rt-single qh-rt-a-zu2430"
            ></i>
          </view>
        </view> -->
      <view
        v-if="componentData.data.address_location_type == 1"
        :style="{
          display: 'flex',
          width: '100%',
        }"
      >
        <view
          class="input-box"
          @tap="toPage()"
          :style="{
            color: componentData.data.inputColor,
            'background-color': componentData.data.inputBgColor,
            'border-radius': componentData.data.borderRadius * 2 + 'rpx',
            'justify-content': componentData.data.justify,
            height: componentData.data.height * 2 + 'rpx',
            marginTop: '3px',
          }"
        >
          <text class="qh-rt-single qh-rt-a-zu2432"></text>
          <view
            class="placeholder"
            :style="{
              'color':'#888',
              'margin-left': '3px',
            }"
            bindtap="toSeek"
            :data-place="componentData.data.title"
          >
            {{ componentData.data.title }}
          </view>
          <view
            class="flex-cn"
            :style="{
              height: '100%',
              marginLeft: 'auto',
            }"
          >
            <view
              class="search_button"
              :style="{
                backgroundColor: componentData.data.barBgColor,
                color: componentData.data.fontColor,
                borderRadius: componentData.data.borderRadius + 'px',
                height: componentData.data.height - 6 + 'px',
                lineHeight: componentData.data.height - 6 + 'px',
                marginRight: '3px',
              }"
            >
              搜索
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  watch: {
    componentData(e) {},
  },
  props: {
    componentData: {
      type: Object,
    },
    autoHieght: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      userPosition: "",
      longitude: "",
      latitude: "",
      //#ifdef MP-ALIPAY
      isWeChat: 0,
      //#endif
      //#ifdef MP-WEIXIN
      isWeChat: 1,
      //#endif
    };
  },
  async created() {
    const position = await this.$mutations.getLocation();
    if (position) {
      this.userPosition = position.name;
      this.longitude = position.longitude;
      this.latitude = position.latitude;
    }
  },
  methods: {
    //选择位置
    getLocal() {
      let obj = {};
      if (this.longitude && this.latitude) {
        obj = {
          longitude: this.longitude,
          latitude: this.latitude,
        };
      }
      uni.chooseLocation({
        ...obj,
        success: (res) => {
          console.log(res);
          uni.setStorageSync("userPositionInfo", res);
          this.userPosition = res.name;
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
      });
    },
    toCoupon() {
      uni.navigateTo({
        url: "/pages/mine/mycoupon/mycoupon",
      });
    },
    //跳转会员码
    toVipCard() {
      uni.navigateTo({
        url: "/pages/mine/card/card?type=1",
      });
    },
    toPage() {
      uni.navigateTo({
        url: "/pages/mer/goods/list/list?search=1",
      });
    },
    callback(e) {
      const myEventDetail = {
        ...e.detail,
      };
      this.triggerEvent("callback", myEventDetail);
    },
  },
};
</script>
<style>
@import "mer-diy-bar.css";
</style>